<template>
  <el-descriptions title="商品明细">
    <el-descriptions-item label="商品ID">{{
      prodData.prodId
    }}</el-descriptions-item>
    <el-descriptions-item label="商品名称">{{
      prodData.prodName
    }}</el-descriptions-item>
    <el-descriptions-item label="SPU">{{
      prodData.createBy
    }}</el-descriptions-item>
    <el-descriptions-item label="图片">
      <el-image style="width: 80px; height: 80px" :src="prodData.prodImage" />
    </el-descriptions-item>
    <el-descriptions-item label="更新时间">{{
      prodData.createTime
    }}</el-descriptions-item>
  </el-descriptions>
  <el-button type="primary" @click="showprodInfo">添加SKU</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="infoId" label="ID" />
    <el-table-column prop="prodName" label="商品名称" />
    <el-table-column prop="prodSku" label="SKU" />
    <el-table-column prop="prodPrice" label="售价" />
    <el-table-column prop="costPrice" label="成本价" />
    <el-table-column prop="prodStock" label="库存" />
    <el-table-column prop="address" label="操作" />
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="form.pageNum"
      v-model:page-size="form.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <el-dialog v-model="dialogFormVisible" title="添加商品SKU" width="500">
      <el-form :model="prodInfoData">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="prodInfoData.prodName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品SKU" :label-width="formLabelWidth">
          <el-input v-model="prodInfoData.prodSku" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品成本价" :label-width="formLabelWidth">
          <el-input v-model="prodInfoData.costPrice" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品售价" :label-width="formLabelWidth">
          <el-input v-model="prodInfoData.prodPrice" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品库存" :label-width="formLabelWidth">
          <el-input v-model="prodInfoData.prodStock" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="onaddprodInfo"> 添加 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getProdByProdId, getProdInfoList, addProdInfo } from "../api/api";
import type { ComponentSize } from "element-plus";
import { ElMessage } from "element-plus";
const route = useRoute();
const prodId = route.params.prodId;
const tableData = ref([]);
const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);
const total = ref(0);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const prodInfoData = ref({
  infoId: null,
  prodId: null,
  prodSku: "",
  prodName: "",
  prodPrice: null,
  costPrice: null,
  prodStock: null,
  createBy: "",
  createTime: "",
  updateBy: null,
  updateTime: null,
  buyNum: null,
});
const prodData = ref({
  prodId: null,
  prodSpu: "",
  prodKind: null,
  prodType: null,
  prodName: "",
  brandId: null,
  createBy: "",
  createTime: "",
  updateBy: null,
  updateTime: null,
  unitId: null,
  tagId: null,
  appr: "",
  prodImage: "",
  kindName: null,
  typeName: null,
  brandName: null,
  unitName: null,
  tagName: null,
});
const form = ref({
  pageNum: 1,
  pageSize: 2,
});
const onaddprodInfo = () => {
  addProdInfo(prodInfoData.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
      dialogFormVisible.value = false;
      getProdInfo();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
const showprodInfo = () => {
  dialogFormVisible.value = true;
};
const getProdInfo = () => {
  getProdInfoList(form.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};
const getProd = () => {
  getProdByProdId(prodId).then((res) => {
    if (res.data.code == 200) {
      prodData.value = res.data.data;
    }
  });
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  form.value.pageSize = val;
  getProdInfo();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  form.value.pageNum = val;
  getProdInfo();
};
onMounted(() => {
  getProd();
  getProdInfo();
});
</script>
